<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	    <!-- Fonts -->
	    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
	    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
	    <!-- CSS Libs -->
	    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
	    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-table.min.css" />
	    <!-- CSS App -->
	    <link rel="stylesheet" type="text/css" href="../css/style.css">
	    <link rel="stylesheet" type="text/css" href="../css/themes/flat-blue.css">
	</head>
	<body>
        <div class="card">
            <div class="card-body no-padding">
                <div class="panel panel-default no-margin">
                    <div class="panel-heading">查询条件</div>
                    <div class="panel-body">
                    	<form class="form-inline" id="query-from">
	                        <div class="form-group">
				                <label for="exampleInputEmail1">input</label>
				                <input type="email" class="form-control" name="name1" id="exampleInputEmail1" placeholder="Enter email">
				            </div>
				            <div class="form-group float-right">
				            	<button type="button" class="btn btn-default" id="search">search</button>
				            </div>
                    	</form>
                    </div>
                </div>
                <table id="table"></table>
				<div id="toolbar">
					<button class="btn btn-success" data-toggle="modal" data-target="#dataDictoryModal">新增</button>
					<button class="btn btn-success" data-toggle="modal" data-target="#dataDictoryModal" onclick="openUpdateModal()">更新</button>
					<button class="btn btn-success">删除</button>
					<button class="btn btn-success">查看</button>
					<button class="btn btn-success">导入</button>
					<button class="btn btn-success">导出</button>
				</div>
				<div class="modal fade" id="dataDictoryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">字典编辑</h4>
                            </div>
                            <div class="modal-body">
                                <form id="edit-from">
                                	<div class="form-group">
						                <label for="code">编码</label>
						                <input type="text" class="form-control" name="code" id="code" placeholder="Enter email">
						            </div>
						            <div class="form-group">
						                <label for="name">input</label>
						                <input type="text" class="form-control" name="name" id="name" placeholder="Enter email">
						            </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
	        </div>
        </div>
        
	    <!-- Javascript Libs -->
        <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
	    <script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
	    <script type="text/javascript" src="../lib/js/Chart.min.js"></script>
	    <script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
	
	    <script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
	    <script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
	    <script type="text/javascript" src="../lib/js/bootstrap-table.min.js" ></script>
	    <script type="text/javascript" src="../lib/js/bootstrap-table-zh-CN.min.js" ></script>
	    <script type="text/javascript" src="../lib/js/ace/ace.js"></script>
	    <script type="text/javascript" src="../lib/js/ace/mode-html.js"></script>
	    <script type="text/javascript" src="../lib/js/ace/theme-github.js"></script>
	    <!-- Javascript -->
	    <script type="text/javascript" src="../js/_app.js"></script>
	    <script type="application/javascript">
	    	$(function(){
				$('#table').bootstrapTable({
				    url: 'data_dictory.json',
				    columns: [{
				        field: 'id',
				        title: 'Item ID',
				        checkbox : true
			        }, {
				        field: 'name',
				        title: 'Item Name'
			        }, {
				        field: 'code',
				        title: 'Item Name'
				    }],
				    pagination: true,
				    sidePagination: 'server',
				    toolbar: "#toolbar",
				    showToggle : true,
				    clickToSelect : true,
				    striped : true
				});
			});
			
			$("#search").click(function(){
				var params = {};
				$.each($("#query-from").serializeArray(), function(i, data) {
					params[data.name] = data.value;
				});
				$('#table').bootstrapTable('refresh', {query : params});
			});
			
			function openUpdateModal(){
				var selections = $('#table').bootstrapTable("getSelections");
				if(selections.length == 0){
					alert();
					return false;
				}else{
					var selected = selections[0];
					$("#edit-from").find("#id").val(selected.id);
					$("#edit-from").find("#code").val(selected.code);
					$("#edit-from").find("#name").val(selected.name);
				}
			}
	    </script>
	</body>
</html>
